<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script lang="ts" setup>
import * as Cesium from 'cesium'
import '../Widgets/widgets.css'
import { onMounted } from 'vue'
import * as cesiumSupport from '@/components/cesiumSupport'
import { LatLng } from '@/components/cesiumSupport'

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NzcyZjcwOS05MzMyLTQ0OGEtOTJiYy0yOGE4MzcyMWVmNGMiLCJpZCI6Mjg0NTQ1LCJpYXQiOjE3NTg4OTYwMTJ9.q_5S0HsnAW9e2AptIPIiJ7ShIHArxZC6JBEIOsmWNFc'
//@ts-ignore
window.CESIUM_BASE_URL = '/cesium'

//设置相机的默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2)

onMounted(async () => {
  var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: true, //是否显示信息窗口
    homeButton: true, //是否显示Home按钮
    fullscreenButton: false, //是否显示全屏按钮
    sceneModePicker: false, //是否显示投影模式选择器
    baseLayerPicker: false, //是否显示图层选择器
    navigationHelpButton: false, //是否显示帮助按钮
    geocoder: true, //是否显示搜索按钮
    timeline: false, //是否显示时间轴
    animation: false, //是否显示动画
    // skyBox: new Cesium.SkyBox({}),
    //天地图矢量地图
    // baseLayer: new Cesium.ImageryLayer(
    //   new Cesium.WebMapTileServiceImageryProvider({
    //     url: 'https://t0.tianditu.gov.cn/vec_w/wmts?tk=501ce352def0a0bcb294848b52b89115',
    //     layer: 'vec',
    //     style: 'default',
    //     format: 'tiles',
    //     tileMatrixSetID: 'w',
    //     maximumLevel: 18,
    //   }),
    // ),
    //天地图卫星地图
    baseLayer: new Cesium.ImageryLayer(
      new Cesium.WebMapTileServiceImageryProvider({
        url: 'https://t0.tianditu.gov.cn/img_w/wmts?tk=501ce352def0a0bcb294848b52b89115',
        layer: 'img',
        style: 'default',
        format: 'tiles',
        tileMatrixSetID: 'w',
        maximumLevel: 18,
      }),
    ),
    //加载默认地形
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestWaterMask: true, //水纹
      requestVertexNormals: true, //光照
    }),
    //加载离线地形
    // terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl(
    //   Cesium.IonResource.fromAssetId(1)
    // )
  })
  //隐藏icon
  //@ts-ignore
  viewer.cesiumWidget.creditContainer.style.display = 'none'

  //天地图注记层（用于显示地名等标注）
  const annotationLayer = new Cesium.ImageryLayer(
    new Cesium.WebMapTileServiceImageryProvider({
      url: 'https://t0.tianditu.gov.cn/cia_w/wmts?tk=501ce352def0a0bcb294848b52b89115',
      layer: 'cia',
      style: 'default',
      format: 'tiles',
      tileMatrixSetID: 'w',
      maximumLevel: 18,
    }),
  )
  cesiumSupport.addLayer(viewer, annotationLayer)

  cesiumSupport.addClickEvent(viewer, function (e: any) {
    const position = cesiumSupport.getClickPostionForLatLng(viewer, e.clientX, e.clientY)
    console.log(position)
  })

  // cesiumSupport.addGlbModel(viewer, 'id', new LatLng(23.109, 113.3191, 100), './models/RobotExpressive.glb', true)
  // cesiumSupport.addRectangle(viewer, 'id', new LatLng(31.64626368893971, 120.74344236579307, 0), new LatLng(32.052851623167754, 121.57443392847257, 0), 0, 800, true)
})
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

// annotationLayer.alpha = 0.5 //这里设置透明度可以让底层的基本地图不被遮挡 //
viewer.imageryLayers.add(annotationLayer) //坐标转换 //屏幕坐标系 二维笛卡尔坐标系
//地理坐标系，wgs-84坐标，Cartographic类型 //笛卡尔空间坐标系（3维坐标） //角度和弧度的转换 // var
radians = cesiumSupport.angleToRadians(45) // console.log(radians) // console.table(viewer)
//经纬度坐标转换为笛卡尔空间坐标 // var cartographic1 = cesiumSupport.latlngToCartographic(20.4,
110.4, 100) // console.table(cartographic1) //这个是空间三维坐标 // var cartographic2 =
cesiumSupport.cartographicToLatlng(cartographic1) // console.table(cartographic2) //
console.log('经度:', cartographic2.lng) // 应接近 110.4 // console.log('纬度:', cartographic2.lat)
// 应接近 20.4 // console.log('高度:', cartographic2.height) //相机
//1.直接设置县级的位置俯仰角、旋转角度，没有动画 // viewer.camera.setView({ // destination:
Cesium.Cartesian3.fromDegrees(110.4, 20.4, 1000000), // orientation: { // heading:
Cesium.Math.toRadians(0), // pitch: Cesium.Math.toRadians(-90), // roll: 0, // }, // }) //
cesiumSupport.setCameraView(viewer, 0, -90, 0, new LatLng(20.4, 110.4, 100000)) //2.带有相机动画
//两种方式参数一致，只是带有动画 // viewer.camera.flyTo({ // destination:
Cesium.Cartesian3.fromDegrees(110.4, 20.4, 1000000), // orientation: { // heading:
Cesium.Math.toRadians(0), // pitch: Cesium.Math.toRadians(-90), // roll: 0, // }, // duration: 2, //
}) // cesiumSupport.flyTo(viewer, new LatLng(20.4, 110.4, 1000000)) //按键事件 //
cesiumSupport.addKeydownEvent(function (e: KeyboardEvent) { // var height =
viewer.camera.positionCartographic.height // switch (e.key) { // case 'w': //向下放大 //
viewer.camera.moveForward(height * 0.1) // break // case 's': //向上远离 //
viewer.camera.moveBackward(height * 0.1) // break // case 'a': //向左移动 //
viewer.camera.moveLeft(height * 0.1) // break // case 'd': //向右移动 //
viewer.camera.moveRight(height * 0.1) // break // case 'q': //向上移动 //
viewer.camera.moveUp(height * 0.1) // break // case 'e': //向下移动 // viewer.camera.moveDown(height
* 0.1) // break // case 'r': //向左旋转 // viewer.camera.lookLeft(Cesium.Math.toRadians(0.1)) //
break // case 'f': //向右选装 // viewer.camera.lookRight(Cesium.Math.toRadians(0.1)) // //
viewer.camera.flyTo({ // // destination: viewer.camera.position, // // orientation: { // // heading:
viewer.camera.heading - Cesium.Math.toRadians(15), // // pitch: viewer.camera.pitch, // // roll:
viewer.camera.roll // // }, // // duration: 0.3 // // }) // break // case 't': //向上旋转 //
viewer.camera.lookUp(Cesium.Math.toRadians(0.1)) // break // case 'g': //向下旋转 //
viewer.camera.lookDown(Cesium.Math.toRadians(0.1)) // break // case 'z': //左翻滚 //
viewer.camera.twistLeft(Cesium.Math.toRadians(0.1)) // break // case 'x': //右翻滚 //
viewer.camera.twistRight(Cesium.Math.toRadians(0.1)) // break // } // }) //
document.addEventListener('keydown', function (e) { // //相机离地高度 // var height =
viewer.camera.positionCartographic.height // switch (e.key) { // case 'w': //向下放大 //
viewer.camera.moveForward(height * 0.1) // break // case 's': //向上远离 //
viewer.camera.moveBackward(height * 0.1) // break // case 'a': //向左移动 //
viewer.camera.moveLeft(height * 0.1) // break // case 'd': //向右移动 //
viewer.camera.moveRight(height * 0.1) // break // case 'q': //向上移动 //
viewer.camera.moveUp(height * 0.1) // break // case 'e': //向下移动 // viewer.camera.moveDown(height
* 0.1) // break // case 'r': //向左旋转 // viewer.camera.lookLeft(Cesium.Math.toRadians(0.1)) //
break // case 'f': //向右选装 // viewer.camera.lookRight(Cesium.Math.toRadians(0.1)) // //
viewer.camera.flyTo({ // // destination: viewer.camera.position, // // orientation: { // // heading:
viewer.camera.heading - Cesium.Math.toRadians(15), // // pitch: viewer.camera.pitch, // // roll:
viewer.camera.roll // // }, // // duration: 0.3 // // }) // break // case 't': //向上旋转 //
viewer.camera.lookUp(Cesium.Math.toRadians(0.1)) // break // case 'g': //向下旋转 //
viewer.camera.lookDown(Cesium.Math.toRadians(0.1)) // break // case 'z': //左翻滚 //
viewer.camera.twistLeft(Cesium.Math.toRadians(0.1)) // break // case 'x': //右翻滚 //
viewer.camera.twistRight(Cesium.Math.toRadians(0.1)) // break // } // }) //获取点击位置经纬度 //
cesiumSupport.addClickEvent(viewer, function (e: MouseEvent) { // const postion =
cesiumSupport.getClickPostionForLatLng(viewer, e.clientX, e.clientY) // console.log(postion) // })
// viewer.container.addEventListener('click', function (e) { // var windowPosition = new
Cesium.Cartesian2(e.clientX, e.clientY) // //方法1： // // var cartesian =
viewer.scene.pickPosition(windowPosition) // // if (Cesium.defined(cartesian)) { // // var
cartographic = Cesium.Cartographic.fromCartesian(cartesian) // // var longitude =
Cesium.Math.toDegrees(cartographic.longitude) // // var latitude =
Cesium.Math.toDegrees(cartographic.latitude) // // var height = cartographic.height // //
console.log('经度:', longitude, '纬度:', latitude, '高度:', height) // // } // //方法2： // var
cartesian = viewer.camera.pickEllipsoid(windowPosition, viewer.scene.globe.ellipsoid) // if
(Cesium.defined(cartesian)) { // var cartographic = Cesium.Cartographic.fromCartesian(cartesian) //
var longitude = Cesium.Math.toDegrees(cartographic.longitude) // var latitude =
Cesium.Math.toDegrees(cartographic.latitude) // var height = cartographic.height //
console.log('经度:', longitude, '纬度:', latitude, '高度:', height) // } // }) //添加点\3d建筑等 //
cesiumSupport.flyTo(viewer, new LatLng(23.109, 113.3191, 100000)) // cesiumSupport.addPoint(viewer,
new LatLng(23.109, 113.3191), new Cesium.PointGraphics( // { // pixelSize: 5, // color:
Cesium.Color.RED, // } // )) // var point = viewer.entities.add({ // position:
Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 0), // point: { // color: Cesium.Color.RED, //
pixelSize: 10, // }, // }) //加载默认3d建筑 // const osmBuildings = await
Cesium.createOsmBuildingsAsync() // viewer.scene.primitives.add(osmBuildings) //
cesiumSupport.addDefaultBuilding(viewer) //加载标签 // var label = viewer.entities.add({ //
position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 500), // label: { // text: 'Hello World',
// font: '20px sans-serif', // fillColor: Cesium.Color.WHITE, // outlineColor: Cesium.Color.BLACK,
// style: Cesium.LabelStyle.FILL_AND_OUTLINE, // outlineWidth: 2, // verticalOrigin:
Cesium.VerticalOrigin.BOTTOM, // horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // }, // billboard:
{ // image: //
'https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/Images/ImageryProviders/bingAerial.png',
// scale: 0.5, // }, // }) // const label = cesiumSupport.addSimpleLabel( // viewer, // 'label', //
new LatLng(23.109, 113.3191), // '广州你好' // ) // cesiumSupport.addLabel( // viewer, // 'label',
// new LatLng(23.109, 113.3191), // new Cesium.LabelGraphics({ // text: 'Hello World', // font:
'20px sans-serif', // fillColor: Cesium.Color.WHITE, // outlineColor: Cesium.Color.BLACK, // style:
Cesium.LabelStyle.FILL_AND_OUTLINE, // outlineWidth: 2, // verticalOrigin:
Cesium.VerticalOrigin.BOTTOM, // horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // }), // new
Cesium.BillboardGraphics({ // image: //
'https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/Images/ImageryProviders/bingAerial.png',
// scale: 0.5, // }) // ) //加载glb模型 // const robot = viewer.entities.add({ // name: 'Robot', //
position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 600), // model: { // uri:
'./models/RobotExpressive.glb', // minimumPixelSize: 128, // distanceDisplayCondition: new
Cesium.DistanceDisplayCondition(0, 5000), // silhouetteColor: Cesium.Color.WHITE, // silhouetteSize:
1, // }, // }) // cesiumSupport.addGlbModel( // viewer, // 'robot', // new LatLng(23.109, 113.3191),
// './models/RobotExpressive.glb', // )
